<template>
  <div class="page">
    <tab-bar :tabsData='tabsData' :currentIndex='tabActiveIndex' @tabClick="tabClick" :isObject="true"></tab-bar>
    <major-list v-if="tabActiveIndex===index" v-for="(item,index) in tabsData" :key="index" ref="majorList" :categoryList="item.categoryList" :majorData="item.majorData" :pageTyp="'show'" :fromPage="'by-profession'" :text="text"></major-list>
  </div>
</template>

<script>
import { api } from '@/utils'
import majorList from '~/components/majorList'
import tabBar from '~/components/tabBar'
import { mapState } from 'vuex'
export default {
  layout: 'xuanke',
  middleware: 'holland',
  data () {
    return {
      tabsData: [
        {
          index: 0,
          id: 1001,
          name: '全部专业',
          isClick: true,
          categoryList: [],
          majorData: []
        // }, {
        //   index: 1,
        //   id: 1002,
        //   name: '适合我的',
        //   isClick: true,
        //   categoryList: [],
        //   majorData: []
        }, {
          index: 2,
          id: 1003,
          name: '男生最多',
          isClick: true,
          categoryList: [],
          majorData: []
        }, {
          index: 3,
          id: 1004,
          name: '女生最多',
          isClick: true,
          categoryList: [],
          majorData: []
        }
      ],
      text: '正在加载数据...',
      params: {},
      tabActiveIndex: 0
    }
  },
  components: {
    majorList,
    tabBar
  },
  computed: {
    ...mapState({
      hollandTest: 'hollandTest'
    })
  },
  methods: {
    pagechange (currentPage) {
      this.params.page = currentPage - 1
      this.getData(this.params)
    },
    tabClick (index) {
      this.tabActiveIndex = index
      this.$refs.majorList.currentIndex = 0
      this.text = '正在加载数据...'
      if (index === 1) {
        if (!this.hollandTest.xuankeFinish) {
          this.$router.push({
            name: 'xuanke-holland'
          })
        } else {
          if (this.tabsData[index].isClick) {
            this.$axios.get(api.getReport).then(data => {
              this.data = data
              if (data) {
                this.tabsData[1].majorData = data.majorCategories
                this.lodash.forEach(data.majorCategories, (item, i) => {
                  this.tabsData[1].categoryList[i] = {
                    id: item.id,
                    name: item.name
                  }
                })
                this.text = ''
              } else {
                this.text = '暂无数据'
              }
            })
          }
        }
      } else {
        if (this.tabsData[index].isClick && index !== 0) {
          this.getData(this.params)
        }
      }
      let type
      this.tabsData.forEach((item, i) => {
        item.active = false
        if (i === index) {
          item.active = true
          type = item.id
        }
      })
      this.params.type = type
    },
    getData (params) {
      this.text = '正在加载数据...'
      this.$axios.get(api.getMajorCategory, { params }).then(data => {
        if (data) {
          let index = (params.type % 1000) - 1
          this.tabsData[index].majorData = data
          this.lodash.map(data, (item) => {
            this.tabsData[index].categoryList.push({
              id: item.id,
              name: item.name
            })
          })
          this.text = ''
          this.tabsData[index].isClick = false
        } else {
          this.text = '暂无数据'
        }
      })
    }
  },
  beforeMount () {
    this.params.type = this.tabsData[0].id
    this.$store.commit('SET_CHOOSE_SUBJECT', '')
    this.getData(this.params)
  }
}
</script>

<style scoped lang="scss">
.page {
  min-height: 100%;
  height: auto;
  /deep/ {
    .major > li > a:hover {
      color: $energized;
    }
    .tab {
      margin-left: 0;
      span {
        font-size: 24px;
        font-weight: bold;
        cursor: pointer;
        &:not(:last-child) {
          margin-right: 30px;
        }
      }
    }
  }
}
</style>
